
<!--
* Author: WebAppLayers
* Product Name: INSPINIA
* Version: 4.0.1
-->
<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <title>Create New Products | 威四方-INSPINIA-模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Inspinia是WrapBootstrap平台上销量第一的管理后台模板。它非常适合构建CRM系统、内容管理系统、项目管理工具和定制化网络应用，具有简洁的界面设计、响应式布局和强大的功能特性。">
    <meta name="keywords" content="Inspinia 管理面板、WrapBootstrap、HTML模板、Bootstrap后台、CRM模板、CMS模板、响应式管理端、Web应用界面、管理主题、最佳管理模板">
    <meta name="author" content="威四方,疾风行">

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Dropzone Plugin CSS -->
    <link href="assets/plugins/dropzone/dropzone.css" rel="stylesheet" type="text/css">

    <!-- Quill css -->
    <link href="assets/plugins/quill/quill.core.css" rel="stylesheet" type="text/css">
    <link href="assets/plugins/quill/quill.snow.css" rel="stylesheet" type="text/css">

    <!-- Theme Config Js -->
    <script src="assets/js/config.js"></script>

    <!-- Vendor css -->
    <link href="assets/css/vendors.min.css" rel="stylesheet" type="text/css">

    <!-- App css -->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- Begin page -->
<div class="wrapper">

    
    <!-- Sidenav Menu Start -->
    <div class="sidenav-menu">

        <!-- Brand Logo -->
        <a href="index.html" class="logo">
            <span class="logo logo-light">
                <span class="logo-lg"><img src="assets/images/logo.png" alt="logo"></span>
                <span class="logo-sm"><img src="assets/images/logo-sm.png" alt="small logo"></span>
            </span>

            <span class="logo logo-dark">
                <span class="logo-lg"><img src="assets/images/logo-black.png" alt="dark logo"></span>
                <span class="logo-sm"><img src="assets/images/logo-sm.png" alt="small logo"></span>
            </span>
        </a>

        <!-- Sidebar Hover Menu Toggle Button -->
        <button class="button-on-hover">
            <i class="ti ti-menu-4 fs-22 align-middle"></i>
        </button>

        <!-- Full Sidebar Menu Close Button -->
        <button class="button-close-offcanvas">
            <i class="ti ti-x align-middle"></i>
        </button>

        <div class="scrollbar" data-simplebar>

            <!-- User -->
            <div class="sidenav-user">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <a href="pages-profile.html" class="link-reset">
                            <img src="assets/images/users/user-2.jpg" alt="user-image" class="rounded-circle mb-2 avatar-md">
                            <span class="sidenav-user-name fw-bold">Damian D.</span>
                            <span class="fs-12 fw-semibold" data-lang="user-role">Art Director</span>
                        </a>
                    </div>
                    <div>
                        <a class="dropdown-toggle drop-arrow-none link-reset sidenav-user-set-icon" data-bs-toggle="dropdown" data-bs-offset="0,12" href="#!" aria-haspopup="false" aria-expanded="false">
                            <i class="ti ti-settings fs-24 align-middle ms-1"></i>
                        </a>

                        <div class="dropdown-menu">
                            <!-- Header -->
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">Welcome back!</h6>
                            </div>

                            <!-- My Profile -->
                            <a href="pages-profile.html" class="dropdown-item">
                                <i class="ti ti-user-circle me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Profile</span>
                            </a>

                            <!-- Notifications -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-bell-ringing me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Notifications</span>
                            </a>

                            <!-- Wallet -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-credit-card me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Balance: <span class="fw-semibold">$985.25</span></span>
                            </a>

                            <!-- Settings -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-settings-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Account Settings</span>
                            </a>

                            <!-- Support -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-headset me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Support Center</span>
                            </a>

                            <!-- Divider -->
                            <div class="dropdown-divider"></div>

                            <!-- Lock -->
                            <a href="auth-lock-screen.html" class="dropdown-item">
                                <i class="ti ti-lock me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Lock Screen</span>
                            </a>

                            <!-- Logout -->
                            <a href="javascript:void(0);" class="dropdown-item text-danger fw-semibold">
                                <i class="ti ti-logout-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Log Out</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!--- Sidenav Menu -->
            <ul class="side-nav">
                <li class="side-nav-title" data-lang="menu-title">Menu</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarDashboards" aria-expanded="false" aria-controls="sidebarDashboards" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout-dashboard"></i></span>
                        <span class="menu-text" data-lang="dashboards">Dashboards</span>
                        <span class="badge bg-success">5</span>
                    </a>
                    <div class="collapse" id="sidebarDashboards">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="index.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="dashboard-one">Dashboard v.1</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="dashboard-2.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="dashboard-two">Dashboard v.2</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="dashboard-3.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="dashboard-three">Dashboard v.3</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="#!" class="side-nav-link disabled">
                                    <span class="menu-text" data-lang="dashboard-four">Dashboard v.4</span>
                                    <span class="badge text-bg-light opacity-50" data-lang="dashboard-soon">soon</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="#!" class="side-nav-link disabled">
                                    <span class="menu-text" data-lang="dashboard-five">Dashboard v.5</span>
                                    <span class="badge text-bg-light opacity-50" data-lang="dashboard-soon">soon</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="landing.html" target="_blank" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-stack-front"></i></span>
                        <span class="menu-text" data-lang="landing-page">Landing Page</span>
                    </a>
                </li>

                <li class="side-nav-title" data-lang="apps-title">Apps</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarEcommerce" aria-expanded="false" aria-controls="sidebarEcommerce" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-basket"></i></span>
                        <span class="menu-text" data-lang="ecommerce">Ecommerce</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarEcommerce">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarProducts" aria-expanded="false" aria-controls="sidebarProducts" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-products">Products</span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarProducts">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-products.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-list">Products</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-products-grid.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-grid">Products Grid</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-product-details.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-details">Product Details</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-add-product.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-add">Add Product</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a href="ecommerce-categories.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-categories">Categories</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarOrders" aria-expanded="false" aria-controls="sidebarOrders" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-orders">Orders</span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarOrders">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-orders.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-orders-list">Orders</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-order-details.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-order-details">Order Details</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a href="ecommerce-customers.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-customers">Customers</span>
                                </a>
                            </li>

                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarSellers" aria-expanded="false" aria-controls="sidebarSellers" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-sellers"> Sellers </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarSellers">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-sellers.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-sellers-list">Sellers</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-seller-details.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-sellers-details">Sellers Details</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="side-nav-item">
                                <a href="ecommerce-reviews.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-reviews">Reviews</span>
                                </a>
                            </li>

                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarReports" aria-expanded="false" aria-controls="sidebarReports" class="side-nav-link">
                                    <span class="menu-text" data-lang="eco-reports"> Reports </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarReports">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="ecommerce-product-views.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-views">Product Views</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="ecommerce-sales.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="eco-pro-sales">Sales</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-mail"></i></span>
                        <span class="menu-text" data-lang="email">Email</span>
                        <span class="badge text-bg-danger">New</span>
                    </a>
                    <div class="collapse" id="sidebarEmail">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="email.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="email-inbox">Inbox</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="email-details.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="email-details">Details</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="email-compose.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="email-compose">Compose</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarUsers" aria-expanded="false" aria-controls="sidebarUsers" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-users"></i></span>
                        <span class="menu-text" data-lang="users"> Users </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarUsers">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="contacts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="contacts">Contacts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="roles.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="roles">Roles</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="permissions.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="permissions">Permissions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarProjects" aria-expanded="false" aria-controls="sidebarProjects" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-briefcase"></i></span>
                        <span class="menu-text" data-lang="projects"> Projects </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarProjects">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="projects.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="projects">My Projects</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="projects-list.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="projects-list">Projects List</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-details.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-details">View Project</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-kanban.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-kanban">Kanban Board</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-team-board.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-team-board">Team Board</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="project-activity.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="project-activity">Activity Steam</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="file-manager.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-folder"></i></span>
                        <span class="menu-text" data-lang="file-manager"> File Manager </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="chat.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-message-dots"></i></span>
                        <span class="menu-text" data-lang="chat"> Chat </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="calendar.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-calendar"></i></span>
                        <span class="menu-text" data-lang="calendar"> Calendar </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarInvoice" aria-expanded="false" aria-controls="sidebarInvoice" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-invoice"></i></span>
                        <span class="menu-text" data-lang="invoice"> Invoice</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarInvoice">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="invoices.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="invoices">Invoices</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="invoice-details.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="invoice-details">Single Invoice</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="invoice-create.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="invoice-create">New Invoice</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarOtherApps" aria-expanded="false" aria-controls="sidebarOtherApps" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-apps"></i></span>
                        <span class="menu-text" data-lang="otherapps"> Other Apps </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarOtherApps">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="companies.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="companies">Companies</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="clients.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="clients">Clients</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="outlook.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="outlook">Outlook View</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="vote-list.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="vote-list">Vote List</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="issue-tracker.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="issue-tracker">Issue Tracker</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="api-keys.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="api-keys">API Keys</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="blog.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="blog">Blog</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="article.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="article">Article</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pin-board.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pin-board">Pin Board</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="forum-view.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="forum-view">Forum View</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="forum-post.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="forum-post">Forum Post</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="pages-title">Custom Pages</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-files"></i></span>
                        <span class="menu-text" data-lang="pages"> Pages </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPages">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="pages-profile.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-profile">Profile</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-faq.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-faq">FAQ</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-pricing.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-pricing">Pricing</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-empty.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-empty">Empty Page</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-timeline.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-timeline">Timeline</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-search-results.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-search-results">Search Results</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-coming-soon.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-coming-soon">Coming Soon</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="pages-terms-conditions.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="pages-terms-conditions">Terms & Conditions</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMiscellaneous" aria-expanded="false" aria-controls="sidebarMiscellaneous" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-package"></i></span>
                        <span class="menu-text" data-lang="miscellaneous"> Miscellaneous </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMiscellaneous">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="misc-nestable.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-nestable">Nestable List</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-text-diff.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-text-diff">Text Diff</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-pdf-viewer.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-pdf-viewer">PDF Viewer</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-i18.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-i18">i18 Support</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-sweet-alerts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-sweet-alerts">Sweet Alerts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-idle-timer.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-idle-timer">Idle Timer</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-pass-meter.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-pass-meter">Password Meter</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-live-favicon.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-live-favicon">Live Favicon</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-clipboard.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-clipboard">Clipboard</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-tree-view.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-tree-view">Tree View</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-loading-buttons.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-loading-buttons">Loading Buttons</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-gallery.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-gallery">Gallery</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-masonry.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-masonry">Masonry</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-tour.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-tour">Tour</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="misc-animation.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="misc-animation">Animation</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" aria-controls="sidebarPagesAuth" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-lock"></i></span>
                        <span class="menu-text" data-lang="authentication"> Authentication </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPagesAuth">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarOneAuth" aria-expanded="false" aria-controls="sidebarOneAuth" class="side-nav-link">
                                    <span class="menu-text" data-lang="version-1"> Version 1 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarOneAuth">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="auth-sign-in.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-sign-in">Sign In</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-sign-up.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-sign-up">Sign Up</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-reset-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-reset-pass">Reset Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-new-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-new-pass">New Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-two-factor.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-two-factor">Two Factor</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-lock-screen.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-lock-screen">Lock Screen</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-success-mail.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-success-mail">Success Mail</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-login-pin.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-login-pin">Login with PIN</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-delete-account.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-delete-account">Delete Account</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarTwoAuth" aria-expanded="false" aria-controls="sidebarTwoAuth" class="side-nav-link">
                                    <span class="menu-text" data-lang="version-2"> Version 2 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarTwoAuth">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="auth-2-sign-in.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-sign-in">Sign In</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-sign-up.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-sign-up">Sign Up</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-reset-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-reset-pass">Reset Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-new-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-new-pass">New Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-two-factor.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-two-factor">Two Factor</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-lock-screen.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-lock-screen">Lock Screen</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-success-mail.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-success-mail">Success Mail</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-login-pin.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-login-pin">Login with PIN</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-2-delete-account.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-2-delete-account">Delete Account</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarThreeAuth" aria-expanded="false" aria-controls="sidebarThreeAuth" class="side-nav-link">
                                    <span class="menu-text" data-lang="version-3"> Version 3 </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarThreeAuth">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="auth-3-sign-in.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-sign-in">Sign In</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-sign-up.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-sign-up">Sign Up</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-reset-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-reset-pass">Reset Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-new-pass.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-new-pass">New Password</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-two-factor.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-two-factor">Two Factor</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-lock-screen.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-lock-screen">Lock Screen</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-success-mail.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-success-mail">Success Mail</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-login-pin.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-login-pin">Login with PIN</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="auth-3-delete-account.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="auth-3-delete-account">Delete Account</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarPagesError" aria-expanded="false" aria-controls="sidebarPagesError" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-alert-hexagon"></i></span>
                        <span class="menu-text" data-lang="error-pages"> Error Pages </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarPagesError">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="error-400.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-400">400</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-401.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-401">401</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-403.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-403">403</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-404.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-404">404</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-408.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-408">408</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="error-500.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="error-500">500</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="maintenance.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maintenance">Maintenance</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="layouts-title">Layouts</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" aria-controls="sidebarLayouts" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout"></i></span>
                        <span class="menu-text" data-lang="layout-options"> Layout Options </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarLayouts">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="layouts-scrollable.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-scrollable">Scrollable</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-compact.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-compact">Compact</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-boxed.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-boxed">Boxed</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-horizontal.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-horizontal">Horizontal</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="layouts-preloader.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="layouts-preloader">Preloader</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarSidebars" aria-expanded="false" aria-controls="sidebarSidebars" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout-sidebar"></i></span>
                        <span class="menu-text" data-lang="sidebars"> Sidebars </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarSidebars">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="sidebar-light.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-light">Light Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-gradient.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-gradient">Gradient Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-gray.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-gray">Gray Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-image.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-image">Image Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-compact.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-compact">Compact Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-icon-view.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-icon-view">Icon View Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-on-hover.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-on-hover">On Hover Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-on-hover-active.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-on-hover-active">On Hover Active</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-offcanvas.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-offcanvas">Offcanvas Menu</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-no-icons.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-no-icons">No Icons with Lines</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="sidebar-with-lines.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="sidebar-with-lines">Sidebar with Lines</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarTopbars" aria-expanded="false" aria-controls="sidebarTopbars" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-layout-bottombar"></i></span>
                        <span class="menu-text" data-lang="topbar"> Topbar </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarTopbars">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="topbar-dark.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-dark">Dark Topbar</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-gray.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-gray">Gray Topbar</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-gradient.html" target="_blank" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-gradient">Gradient Topbar</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-sub-items.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-sub-items">Topbar with Sub Items</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="topbar-tools.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="topbar-tools">Topbar with Tools</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="components-title">Components</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" aria-controls="sidebarBaseUI" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-palette"></i></span>
                        <span class="menu-text" data-lang="base-ui"> Base UI </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarBaseUI">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="ui-accordions.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-accordions">Accordions</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-alerts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-alerts">Alerts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-images.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-images">Images</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-badges.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-badges">Badges</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-breadcrumb.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-breadcrumb">Breadcrumb</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-buttons.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-buttons">Buttons</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-cards.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-cards">Cards</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-carousel.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-carousel">Carousel</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-collapse.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-collapse">Collapse</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-colors.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-colors">Colors</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-dropdowns.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-dropdowns">Dropdowns</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-videos.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-videos">Videos</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-grid.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-grid">Grid Options</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-links.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-links">Links</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-list-group.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-list-group">List Group</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-modals.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-modals">Modals</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-notifications.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-notifications">Notifications</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-offcanvas.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-offcanvas">Offcanvas</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-placeholders.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-placeholders">Placeholders</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-pagination.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-pagination">Pagination</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-popovers.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-popovers">Popovers</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-progress.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-progress">Progress</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-scrollspy.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-scrollspy">Scrollspy</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-spinners.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-spinners">Spinners</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-tabs.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-tabs">Tabs</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-tooltips.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-tooltips">Tooltips</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-typography.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-typography">Typography</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="ui-utilities.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="ui-utilities">Utilities</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="widgets.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-category"></i></span>
                        <span class="menu-text" data-lang="widgets"> Widgets </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="metrics.html" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-chart-histogram"></i></span>
                        <span class="menu-text" data-lang="metrics"> Metrics </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" aria-controls="sidebarCharts" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-chart-donut"></i></span>
                        <span class="menu-text" data-lang="graphs"> Graphs </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarCharts">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarApexCharts" aria-expanded="false" aria-controls="sidebarApexCharts" class="side-nav-link">
                                    <span class="menu-text" data-lang="apex-charts"> Apex Charts </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarApexCharts">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="charts-apex-area.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-area">Area</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-bar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-bar">Bar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-bubble.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-bubble">Bubble</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-candlestick.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-candlestick">Candlestick</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-column.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-column">Column</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-heatmap.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-heatmap">Heatmap</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-line.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-line">Line</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-mixed.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-mixed">Mixed</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-timeline.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-timeline">Timeline</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-boxplot.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-boxplot">Boxplot</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-treemap.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-treemap">Treemap</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-pie.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-pie">Pie</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-radar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-radar">Radar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-radialbar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-radialbar">RadialBar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-scatter.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-scatter">Scatter</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-polar-area.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-polar-area">Polar Area</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-sparklines.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-sparklines">Sparklines</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-range.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-range">Range</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-funnel.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-funnel">Funnel</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-apex-slope.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-apex-slope">Slope</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarEcharts" aria-expanded="false" aria-controls="sidebarEcharts" class="side-nav-link">
                                    <span class="menu-text" data-lang="echarts"> Echarts </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarEcharts">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="charts-echart-line.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-line">Line</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-bar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-bar">Bar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-pie.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-pie">Pie</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-scatter.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-scatter">Scatter</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-geo-map.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-geo-map">GEO Map</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-gauge.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-gauge">Gauge</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-candlestick.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-candlestick">Candlestick</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-area.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-area">Area</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-radar.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-radar">Radar</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-heatmap.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-heatmap">Heatmap</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="charts-echart-other.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="charts-echart-other">Other</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a href="charts-apextree.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="charts-apextree">Apex Tree</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="charts-apexsankey.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="charts-apexsankey">Apex Sankey</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-checkup-list"></i></span>
                        <span class="menu-text" data-lang="forms">Forms</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarForms">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="form-elements.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-elements">Basic Elements</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-pickers.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-pickers">Pickers</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-select.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-select">Select</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-validation.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-validation">Validation</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-wizard.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-wizard">Wizard</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-fileuploads.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-fileuploads">File Uploads</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-text-editors.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-text-editors">Text Editors</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-range-slider.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-range-slider">Range Slider</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-layouts.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-layouts">Layouts</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="form-other-plugins.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="form-other-plugins">Other Plugins</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" aria-controls="sidebarTables" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-table-column"></i></span>
                        <span class="menu-text" data-lang="tables">Tables</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarTables">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="tables-static.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="tables-static">Static Tables</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="tables-custom.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="tables-custom">Custom Tables</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarDataTables" aria-expanded="false" aria-controls="sidebarDataTables" class="side-nav-link">
                                    <span class="menu-text" data-lang="datatables">DataTables</span>
                                    <span class="badge bg-success">12</span>
                                </a>
                                <div class="collapse" id="sidebarDataTables">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-basic.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-basic">Basic</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-export-data.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-export-data">Export Data</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-select.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-select">Select</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-ajax.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-ajax">Ajax</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-javascript.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-javascript">Javascript Source</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-rendering.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-rendering">Data Rendering</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-scroll.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-scroll">Scroll</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-columns.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-columns">Show & Hide Column</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-child-rows.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-child-rows">Child Rows</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-column-searching.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-column-searching">Column Searching</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-range-search.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-range-search">Range Search</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-fixed-header.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-fixed-header">Fixed Header</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-add-rows.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-add-rows">Add Rows</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="tables-datatables-checkbox-select.html" class="side-nav-link">
                                                <span class="menu-text" data-lang="tables-datatables-checkbox-select">Checkbox Select</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-icons"></i></span>
                        <span class="menu-text" data-lang="icons">Icons</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarIcons">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="icons-tabler.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="icons-tabler">Tabler</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="icons-lucide.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="icons-lucide">Lucide</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="icons-flags.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="icons-flags">Flags</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-map"></i></span>
                        <span class="menu-text" data-lang="maps">Maps</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMaps">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a href="maps-google.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maps-google">Google Maps</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="maps-vector.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maps-vector">Vector Maps</span>
                                </a>
                            </li>
                            <li class="side-nav-item">
                                <a href="maps-leaflet.html" class="side-nav-link">
                                    <span class="menu-text" data-lang="maps-leaflet">Leaflet Maps</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-title mt-2" data-lang="items-title">Menu Items</li>

                <li class="side-nav-item">
                    <a data-bs-toggle="collapse" href="#sidebarMenuLevels" aria-expanded="false" aria-controls="sidebarMenuLevels" class="side-nav-link">
                        <span class="menu-icon"><i class="ti ti-sitemap"></i></span>
                        <span class="menu-text" data-lang="menu-levels"> Menu Levels </span>
                        <span class="menu-arrow"></span>
                    </a>
                    <div class="collapse" id="sidebarMenuLevels">
                        <ul class="sub-menu">
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false" aria-controls="sidebarSecondLevel" class="side-nav-link">
                                    <span class="menu-text" data-lang="second-level"> Second Level </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarSecondLevel">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="javascript: void(0);" class="side-nav-link">
                                                <span class="menu-text">Item 2.1</span>
                                            </a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a href="javascript: void(0);" class="side-nav-link">
                                                <span class="menu-text">Item 2.2</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="side-nav-item">
                                <a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false" aria-controls="sidebarThirdLevel" class="side-nav-link">
                                    <span class="menu-text" data-lang="third-level"> Third Level </span>
                                    <span class="menu-arrow"></span>
                                </a>
                                <div class="collapse" id="sidebarThirdLevel">
                                    <ul class="sub-menu">
                                        <li class="side-nav-item">
                                            <a href="javascript: void(0);" class="side-nav-link">Item 1</a>
                                        </li>
                                        <li class="side-nav-item">
                                            <a data-bs-toggle="collapse" href="#sidebarFourthLevel" aria-expanded="false" aria-controls="sidebarFourthLevel" class="side-nav-link">
                                                <span class="menu-text"> Item 2 </span>
                                                <span class="menu-arrow"></span>
                                            </a>
                                            <div class="collapse" id="sidebarFourthLevel">
                                                <ul class="sub-menu">
                                                    <li class="side-nav-item">
                                                        <a href="javascript: void(0);" class="side-nav-link">
                                                            <span class="menu-text">Item 3.1</span>
                                                        </a>
                                                    </li>
                                                    <li class="side-nav-item">
                                                        <a href="javascript: void(0);" class="side-nav-link">
                                                            <span class="menu-text">Item 3.2</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="side-nav-item">
                    <a href="#!" class="side-nav-link disabled">
                        <span class="menu-icon"><i class="ti ti-ban"></i></span>
                        <span class="menu-text" data-lang="disabled-menu"> Disabled Menu </span>
                    </a>
                </li>

                <li class="side-nav-item">
                    <a href="#!" class="side-nav-link special-menu">
                        <span class="menu-icon"><i class="ti ti-star"></i></span>
                        <span class="menu-text" data-lang="special-menu"> Special Menu </span>
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!-- Sidenav Menu End -->

    <!-- Topbar Start -->
    <header class="app-topbar">
        <div class="container-fluid topbar-menu">
            <div class="d-flex align-items-center gap-2">
                <!-- Topbar Brand Logo -->
                <div class="logo-topbar">
                    <!-- Logo light -->
                    <a href="index.html" class="logo-light">
                        <span class="logo-lg">
                            <img src="assets/images/logo.png" alt="logo">
                        </span>
                        <span class="logo-sm">
                            <img src="assets/images/logo-sm.png" alt="small logo">
                        </span>
                    </a>

                    <!-- Logo Dark -->
                    <a href="index.html" class="logo-dark">
                        <span class="logo-lg">
                            <img src="assets/images/logo-black.png" alt="dark logo">
                        </span>
                        <span class="logo-sm">
                            <img src="assets/images/logo-sm.png" alt="small logo">
                        </span>
                    </a>
                </div>

                <!-- Sidebar Menu Toggle Button -->
                <button class="sidenav-toggle-button btn btn-primary btn-icon">
                    <i class="ti ti-menu-4 fs-22"></i>
                </button>

                <!-- Horizontal Menu Toggle Button -->
                <button class="topnav-toggle-button px-2" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                    <i class="ti ti-menu-4 fs-22"></i>
                </button>

                <!-- Search -->
                <div class="app-search d-none d-xl-flex">
                    <input type="search" class="form-control topbar-search" name="search" placeholder="Search for something...">
                    <i data-lucide="search" class="app-search-icon text-muted"></i>
                </div>

                <!-- Mega Menu Dropdown -->
                <div class="topbar-item d-none d-md-flex">
                    <div class="dropdown">
                        <button class="topbar-link btn fw-medium btn-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,16" type="button" aria-haspopup="false" aria-expanded="false">
                            Boom Boom! 😍<i class="ti ti-chevron-down ms-1"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-xxl p-0">
                            <div class="h-100" style="max-height: 380px;" data-simplebar>
                                <div class="row g-0">
                                    <div class="col-12">
                                        <div class="p-3 text-center bg-light bg-opacity-50">
                                            <h4 class="mb-0 fs-lg fw-semibold">Welcome to <span class="text-primary">INSPINIA+</span> Admin Theme.</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-0">
                                    <div class="col-md-4">
                                        <div class="p-3">
                                            <h5 class="mb-2 fw-semibold fs-sm dropdown-header">Dashboard & Analytics</h5>
                                            <ul class="list-unstyled megamenu-list">
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Sales Dashboard</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Marketing Dashboard</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Finance Overview</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">User Analytics</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Traffic Insights</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Performance Metrics</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Conversion Tracking</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="p-3">
                                            <h5 class="mb-2 fw-semibold fs-sm dropdown-header">Project Management</h5>
                                            <ul class="list-unstyled megamenu-list">
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Task Overview</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Kanban Board</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Gantt Chart</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Team Collaboration</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Project Milestones</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Workflow Automation</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Timesheets & Reports</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="p-3">
                                            <h5 class="mb-2 fw-semibold fs-sm dropdown-header">User Management</h5>
                                            <ul class="list-unstyled megamenu-list">
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">User Profiles</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Access Control</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Role Permissions</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Activity Logs</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Security Settings</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">User Groups</a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0);" class="dropdown-item">Authentication & Login</a>
                                                </li>
                                            </ul>
                                        </div> <!-- end dropdown-->
                                    </div> <!-- end col-->
                                </div> <!-- end row-->

                            </div> <!-- end .h-100-->
                        </div> <!-- .dropdown-menu-->
                    </div> <!-- .dropdown-->
                </div> <!-- end topbar-item -->
            </div> <!-- .d-flex-->

            <div class="d-flex align-items-center gap-2">
                <!-- Language Dropdown -->
                <div class="topbar-item">
                    <div class="dropdown">
                        <button class="topbar-link fw-bold" data-bs-toggle="dropdown" data-bs-offset="0,21" type="button" aria-haspopup="false" aria-expanded="false">
                            <img src="assets/images/flags/us.svg" alt="user-image" class="w-100 rounded me-2" height="18" id="selected-language-image">
                            <span id="selected-language-code"> EN </span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="en" title="English">
                                <img src="assets/images/flags/us.svg" alt="English" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">English</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="de" title="German">
                                <img src="assets/images/flags/de.svg" alt="German" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Deutsch</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="it" title="Italian">
                                <img src="assets/images/flags/it.svg" alt="Italian" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Italiano</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="es" title="Spanish">
                                <img src="assets/images/flags/es.svg" alt="Spanish" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Español</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="ru" title="Russian">
                                <img src="assets/images/flags/ru.svg" alt="Russian" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">Русский</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item" data-translator-lang="hi" title="Hindi">
                                <img src="assets/images/flags/in.svg" alt="Hindi" class="me-1 rounded" height="18" data-translator-image>
                                <span class="align-middle">हिन्दी</span>
                            </a>
                        </div> <!-- end dropdown-menu-->
                    </div> <!-- end dropdown-->
                </div> <!-- end topbar item-->

                <!-- Messages Dropdown -->
                <div class="topbar-item">
                    <div class="dropdown">
                        <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,22" type="button" data-bs-auto-close="outside" aria-haspopup="false" aria-expanded="false">
                            <i data-lucide="mails" class="fs-xxl"></i>
                            <span class="badge text-bg-success badge-circle topbar-badge">7</span>
                        </button>

                        <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                            <div class="px-3 py-2 border-bottom">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h6 class="m-0 fs-md fw-semibold">Messages</h6>
                                    </div>
                                    <div class="col text-end">
                                        <a href="#!" class="badge badge-soft-success badge-label py-1">09 Notifications</a>
                                    </div>
                                </div>
                            </div>

                            <div style="max-height: 300px;" data-simplebar>
                                <!-- item 1 -->
                                <div class="dropdown-item notification-item py-2 text-wrap active" id="message-1">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-1.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Liam Carter</span> uploaded a new document to <span class="fw-medium text-body">Project Phoenix</span>
                                            <br>
                                            <span class="fs-xs">5 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-1">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 2 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-2">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-2.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Ava Mitchell</span> commented on <span class="fw-medium text-body">Marketing Campaign Q3</span>
                                            <br>
                                            <span class="fs-xs">12 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-2">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 3 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-3">
                                    <span class="d-flex gap-3">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title text-bg-info rounded-circle fs-22">
                                                <i data-lucide="shield-user" class="fs-22 fill-white"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Noah Blake</span> updated the status of <span class="fw-medium text-body">Client Onboarding</span>
                                            <br>
                                            <span class="fs-xs">30 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-3">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 4 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-4">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-4.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Sophia Taylor</span> sent an invoice for <span class="fw-medium text-body">Service Renewal</span>
                                            <br>
                                            <span class="fs-xs">1 hour ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-4">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 5 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-5">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-5.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Ethan Moore</span> completed the task <span class="fw-medium text-body">UI Review</span>
                                            <br>
                                            <span class="fs-xs">2 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-5">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 6 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="message-6">
                                    <span class="d-flex gap-3">
                                        <span class="flex-shrink-0">
                                            <img src="assets/images/users/user-6.jpg" class="avatar-md rounded-circle" alt="User Avatar">
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Olivia White</span> assigned you a task in <span class="fw-medium text-body">Sales Pipeline</span>
                                            <br>
                                            <span class="fs-xs">Yesterday</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#message-6">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>

                            <!-- All-->
                            <a href="javascript:void(0);" class="dropdown-item text-center text-reset text-decoration-underline link-offset-2 fw-bold notify-item border-top border-light py-2">
                                Read All Messages
                            </a>

                        </div> <!-- End dropdown-menu -->
                    </div> <!-- end dropdown-->
                </div> <!-- end topbar item-->

                <!-- Notification Dropdown -->
                <div class="topbar-item">
                    <div class="dropdown">
                        <button class="topbar-link dropdown-toggle drop-arrow-none" data-bs-toggle="dropdown" data-bs-offset="0,22" type="button" data-bs-auto-close="outside" aria-haspopup="false" aria-expanded="false">
                            <i data-lucide="bell" class="fs-xxl"></i>
                            <span class="badge badge-square text-bg-warning topbar-badge">14</span>
                        </button>

                        <div class="dropdown-menu p-0 dropdown-menu-end dropdown-menu-lg">
                            <div class="px-3 py-2 border-bottom">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <h6 class="m-0 fs-md fw-semibold">Notifications</h6>
                                    </div>
                                    <div class="col text-end">
                                        <a href="#!" class="badge text-bg-light badge-label py-1">14 Alerts</a>
                                    </div>
                                </div>
                            </div>

                            <div style="max-height: 300px;" data-simplebar>
                                <!-- item 1 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-1">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-danger rounded fs-22">
                                                <i data-lucide="server-crash" class="fs-xl fill-danger"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Critical alert: Server crash detected</span>
                                            <br>
                                            <span class="fs-xs">30 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-1">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 2 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-2">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle text-warning rounded fs-22">
                                                <i data-lucide="alert-triangle" class="fs-xl fill-warning"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">High memory usage on Node A</span>
                                            <br>
                                            <span class="fs-xs">10 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-2">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 3 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-3">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded fs-22">
                                                <i data-lucide="check-circle" class="fs-xl fill-success"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Backup completed successfully</span>
                                            <br>
                                            <span class="fs-xs">1 hour ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-3">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 4 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-4">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-primary-subtle text-primary rounded fs-22">
                                                <i data-lucide="user-plus" class="fs-xl fill-primary"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">New user registration: Sarah Miles</span>
                                            <br>
                                            <span class="fs-xs">Just now</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-4">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 5 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-5">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-danger rounded fs-22">
                                                <i data-lucide="bug" class="fs-xl fill-danger"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Bug reported in payment module</span>
                                            <br>
                                            <span class="fs-xs">20 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-5">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 6 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-6">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-info-subtle text-info rounded fs-22">
                                                <i data-lucide="message-circle" class="fs-xl fill-info"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">New comment on Task #142</span>
                                            <br>
                                            <span class="fs-xs">15 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-6">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 7 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-7">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle text-warning rounded fs-22">
                                                <i data-lucide="battery-warning" class="fs-xl fill-warning"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Low battery on Device X</span>
                                            <br>
                                            <span class="fs-xs">45 minutes ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-7">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 8 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-8">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded fs-22">
                                                <i data-lucide="cloud-upload" class="fs-xl fill-success"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">File upload completed</span>
                                            <br>
                                            <span class="fs-xs">1 hour ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-8">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 9 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-9">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-primary-subtle text-primary rounded fs-22">
                                                <i data-lucide="calendar" class="fs-xl fill-primary"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Team meeting scheduled at 3 PM</span>
                                            <br>
                                            <span class="fs-xs">2 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-9">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 10 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-10">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-secondary-subtle text-secondary rounded fs-22">
                                                <i data-lucide="download" class="fs-xl fill-secondary"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Report ready for download</span>
                                            <br>
                                            <span class="fs-xs">3 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-10">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 11 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-11">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-danger-subtle text-danger rounded fs-22">
                                                <i data-lucide="lock" class="fs-xl fill-danger"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Multiple failed login attempts</span>
                                            <br>
                                            <span class="fs-xs">5 hours ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-11">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 12 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-12">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-info-subtle text-info rounded fs-22">
                                                <i data-lucide="bell-ring" class="fs-xl fill-info"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Reminder: Submit your timesheet</span>
                                            <br>
                                            <span class="fs-xs">Today, 9:00 AM</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-12">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 13 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-13">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-warning-subtle text-warning rounded fs-22">
                                                <i data-lucide="database-zap" class="fs-xl fill-warning"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">Database nearing capacity</span>
                                            <br>
                                            <span class="fs-xs">Yesterday</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-13">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>

                                <!-- item 14 -->
                                <div class="dropdown-item notification-item py-2 text-wrap" id="notification-14">
                                    <span class="d-flex gap-2">
                                        <span class="avatar-md flex-shrink-0">
                                            <span class="avatar-title bg-success-subtle text-success rounded fs-22">
                                                <i data-lucide="check-square" class="fs-xl fill-success"></i>
                                            </span>
                                        </span>
                                        <span class="flex-grow-1 text-muted">
                                            <span class="fw-medium text-body">System check completed</span>
                                            <br>
                                            <span class="fs-xs">2 days ago</span>
                                        </span>
                                        <button type="button" class="flex-shrink-0 text-muted btn btn-link p-0" data-dismissible="#notification-14">
                                            <i class="ti ti-xbox-x-filled fs-xxl"></i>
                                        </button>
                                    </span>
                                </div>
                            </div> <!-- end dropdown-->

                            <!-- All-->
                            <a href="javascript:void(0);" class="dropdown-item text-center text-reset text-decoration-underline link-offset-2 fw-bold notify-item border-top border-light py-2">
                                View All Alerts
                            </a>

                        </div>
                    </div>
                </div>

                <!-- Button Trigger Customizer Offcanvas -->
                <div class="topbar-item d-none d-sm-flex">
                    <button class="topbar-link" data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas" type="button">
                        <i data-lucide="settings" class="fs-xxl"></i>
                    </button>
                </div>

                <!-- Light/Dark Mode Button -->
                <div class="topbar-item d-none d-sm-flex">
                    <button class="topbar-link" id="light-dark-mode" type="button">
                        <i data-lucide="moon" class="fs-xxl mode-light-moon"></i>
                        <i data-lucide="sun" class="fs-xxl mode-light-sun"></i>
                    </button>
                </div>

                <!-- User Dropdown -->
                <div class="topbar-item nav-user">
                    <div class="dropdown">
                        <a class="topbar-link dropdown-toggle drop-arrow-none px-2" data-bs-toggle="dropdown" data-bs-offset="0,16" href="#!" aria-haspopup="false" aria-expanded="false">
                            <img src="assets/images/users/user-2.jpg" width="32" class="rounded-circle me-lg-2 d-flex" alt="user-image">
                            <div class="d-lg-flex align-items-center gap-1 d-none">
                                <h5 class="my-0">Damian D.</h5>
                                <i class="ti ti-chevron-down align-middle"></i>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <!-- Header -->
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">Welcome back!</h6>
                            </div>

                            <!-- My Profile -->
                            <a href="pages-profile.html" class="dropdown-item">
                                <i class="ti ti-user-circle me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Profile</span>
                            </a>

                            <!-- Notifications -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-bell-ringing me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Notifications</span>
                            </a>

                            <!-- Wallet -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-credit-card me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Balance: <span class="fw-semibold">$985.25</span></span>
                            </a>

                            <!-- Settings -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-settings-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Account Settings</span>
                            </a>

                            <!-- Support -->
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="ti ti-headset me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Support Center</span>
                            </a>

                            <!-- Divider -->
                            <div class="dropdown-divider"></div>

                            <!-- Lock -->
                            <a href="auth-lock-screen.html" class="dropdown-item">
                                <i class="ti ti-lock me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Lock Screen</span>
                            </a>

                            <!-- Logout -->
                            <a href="javascript:void(0);" class="dropdown-item text-danger fw-semibold">
                                <i class="ti ti-logout-2 me-2 fs-17 align-middle"></i>
                                <span class="align-middle">Log Out</span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Topbar End -->

    

    <!-- ============================================================== -->
    <!-- Start Main Content -->
    <!-- ============================================================== -->

    <div class="content-page">

        <div class="container-fluid">

            
            <div class="page-title-head d-flex align-items-center">
                <div class="flex-grow-1">
                    <h4 class="fs-sm text-uppercase fw-bold m-0">Add Product</h4>
                </div>

                <div class="text-end">
                    <ol class="breadcrumb m-0 py-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Inspinia</a></li>
                        
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                        
                        <li class="breadcrumb-item active">Add Product</li>
                    </ol>
                </div>
            </div>
            

            <div class="row justify-content-center">
                <div class="col-xxl-10">
                    <div class="row">
                        <div class="col-xxl-8">
                            <div class="card">
                                <div class="card-header d-block p-3">
                                    <h4 class="card-title mb-1">Product Information</h4>
                                    <p class="text-muted mb-0">To add a new product, please provide the necessary
                                        details in the fields below.</p>
                                </div> <!-- end card-header -->

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label for="productName" class="form-label">Product Name <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="productName"
                                                       placeholder="Enter product name" required="">
                                            </div>
                                        </div>

                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="skuId" class="form-label">SKU <span
                                                        class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="skuId"
                                                       placeholder="SOFA-10058" required="">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="stockNumber" class="form-label">Stock <span
                                                        class="text-danger">*</span></label>
                                                <input type="number" class="form-control" id="stockNumber"
                                                       placeholder="250">
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div>
                                                <label class="form-label">Product Description <span class="text-muted">(Optional)</span></label>
                                                <div id="snow-editor">
                                                    <p>Introducing the <strong><em>Azure Comfort Single
                                                        Sofa</em></strong>, a perfect blend of modern design and
                                                        luxurious comfort.</p>

                                                    <p>This premium blue single sofa is designed to elevate any living
                                                        space with its sleek profile and rich, durable fabric. It’s the
                                                        perfect seating option for your living room, lounge area, or
                                                        cozy reading nook.</p>

                                                    <ul>
                                                        <li>Crafted with a solid mahogany frame for enhanced
                                                            durability.
                                                        </li>
                                                        <li>Upholstered in a high-quality blue fabric that offers both
                                                            style and comfort.
                                                        </li>
                                                    </ul>

                                                </div><!-- end Snow-editor -->
                                            </div>
                                        </div>

                                    </div>
                                </div> <!-- end card-body-->
                            </div> <!-- end card-->

                            <div class="card">
                                <div class="card-header d-block p-3">
                                    <h4 class="card-title mb-1">Product Image</h4>
                                    <p class="text-muted mb-0">To upload a product image, please use the option below to
                                        select and upload the relevant file.</p>
                                </div> <!-- end card-header -->

                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <form action="/" method="post" class="dropzone" id="myAwesomeDropzone"
                                                  data-plugin="dropzone" data-previews-container="#file-previews"
                                                  data-upload-preview-template="#uploadPreviewTemplate">
                                                <div class="fallback">
                                                    <input name="file" type="file">
                                                </div>

                                                <div class="dz-message needsclick">
                                                    <div class="avatar-lg mx-auto mb-3">
                                                            <span class="avatar-title bg-info-subtle text-info rounded-circle">
                                                                <i class="fs-24 ti ti-cloud-upload"></i>
                                                            </span>
                                                    </div>
                                                    <h4 class="mb-2">Drop files here or click to upload.</h4>
                                                    <p class="text-muted fst-italic mb-3">You can drag images here, or
                                                        browse files via the button below.</p>
                                                    <button type="button" class="btn btn-sm shadow btn-default">Browse
                                                        Images
                                                    </button>
                                                </div>
                                            </form>

                                            <!-- Preview -->
                                            <div class="dropzone-previews mt-3" id="file-previews"></div>

                                            <!-- file preview template -->
                                            <div class="d-none" id="uploadPreviewTemplate">
                                                <div class="card mt-1 mb-0 border-dashed border">
                                                    <div class="p-2">
                                                        <div class="row align-items-center">
                                                            <div class="col-auto">
                                                                <img data-dz-thumbnail src="#"
                                                                     class="avatar-sm rounded bg-light" alt="">
                                                            </div>
                                                            <div class="col ps-0">
                                                                <a href="javascript:void(0);" class="fw-semibold"
                                                                   data-dz-name></a>
                                                                <p class="mb-0 text-muted" data-dz-size></p>
                                                            </div>
                                                            <div class="col-auto">
                                                                <!-- Button -->
                                                                <a href="" class="btn btn-link btn-lg text-danger"
                                                                   data-dz-remove>
                                                                    <i class="ti ti-x"></i>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- end file preview template -->
                                        </div>

                                    </div>
                                </div> <!-- end card-body-->
                            </div> <!-- end card-->

                        </div> <!-- end col-->

                        <div class="col-xxl-4">
                            <div class="card">
                                <div class="card-header d-block p-3">
                                    <h4 class="card-title mb-1">Pricing</h4>
                                    <p class="text-muted mb-0">Set the base price and applicable discount for the
                                        product using the options below.</p>
                                </div> <!-- end card-header -->

                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="basePrice" class="form-label">Base Price <span
                                                class="text-danger">*</span></label>
                                        <div class="app-search">
                                            <input type="number" class="form-control" id="basePrice"
                                                   placeholder="Enter base price (e.g., 199.99)">
                                            <i data-lucide="dollar-sign" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="discount" class="form-label">Discount Type <span class="text-muted">(Optional)</span></label>
                                        <div class="app-search">
                                            <select class="form-select form-control my-1 my-md-0" id="discount">
                                                <option selected>Choose Discount</option>
                                                <option value="No Discount">No Discount</option>
                                                <option value="Flat Discount">Flat Discount</option>
                                                <option value="Percentage Discount">Percentage Discount</option>
                                            </select>
                                            <i data-lucide="percent" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>

                                    <div class="mb-0">
                                        <label for="discountValue" class="form-label">Discount Value <span
                                                class="text-muted">(Optional)</span></label>
                                        <div class="app-search">
                                            <input type="number" class="form-control" id="discountValue"
                                                   placeholder="Enter discount amount or percentage">
                                            <i data-lucide="tag" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header d-block p-3">
                                    <h4 class="card-title mb-1">Organize</h4>
                                    <p class="text-muted mb-0">Organize your product by selecting the appropriate brand,
                                        category, sub-category, status, and tags.</p>
                                </div> <!-- end card-header -->

                                <div class="card-body">
                                    <div class="mb-3">
                                        <label for="brand" class="form-label">Brand</label>
                                        <div class="app-search">
                                            <input type="text" class="form-control" id="brand"
                                                   placeholder="Enter brand name">
                                            <i data-lucide="layers" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="category" class="form-label">Category <span
                                                class="text-danger">*</span></label>
                                        <div class="app-search">
                                            <select class="form-select form-control my-1 my-md-0" id="category">
                                                <option selected>Choose Category</option>
                                                <option value="Furniture">Furniture</option>
                                                <option value="Electronics">Electronics</option>
                                                <option value="Fashion">Fashion</option>
                                            </select>
                                            <i data-lucide="grid" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="subCategory" class="form-label">Sub Category <span
                                                class="text-danger">*</span></label>
                                        <div class="app-search">
                                            <select class="form-select form-control my-1 my-md-0" id="subCategory">
                                                <option selected>Choose Sub Category</option>
                                                <option value="Chairs">Chairs</option>
                                                <option value="Sofas">Sofas</option>
                                                <option value="Tables">Tables</option>
                                            </select>
                                            <i data-lucide="list" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="statusOne" class="form-label">Status <span
                                                class="text-danger">*</span></label>
                                        <div class="app-search">
                                            <select class="form-select form-control my-1 my-md-0" id="statusOne">
                                                <option selected>Choose Status</option>
                                                <option value="Published">Published</option>
                                                <option value="Inactive">Inactive</option>
                                                <option value="Schedule">Schedule</option>
                                                <option value="Draft">Draft</option>
                                            </select>
                                            <i data-lucide="toggle-left" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>

                                    <div class="mb-0">
                                        <label for="tags" class="form-label">Tags</label>
                                        <div class="app-search">
                                            <input type="text" class="form-control" id="tags"
                                                   placeholder="Enter tags separated by commas">
                                            <i data-lucide="tag" class="app-search-icon text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div> <!-- end row-->

                    <div class="mt-2 mb-4 d-flex gap-2 justify-content-center">
                        <a href="#!" class="btn btn-link text-danger fw-semibold">
                            <i data-lucide="clipboard-x" class="fs-sm me-2"></i> Discard
                        </a>
                        <a href="#!" class="btn btn-soft-purple">
                            <i data-lucide="save" class="fs-sm me-2"></i> Save as Draft
                        </a>
                        <a href="#!" class="btn btn-success">
                            <i data-lucide="plus" class="fs-sm me-2"></i> Publish
                        </a>
                    </div>
                </div> <!-- end col-->
            </div> <!-- end row-->

        </div>
        <!-- container -->

        <!-- Footer Start -->
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start">
                        © 2014 - <script>document.write(new Date().getFullYear())</script> Inspinia By <span class="fw-semibold">WebAppLayers</span> 
                    </div>
                    <div class="col-md-6">
                        <div class="text-md-end d-none d-md-block">
                            10GB of <span class="fw-bold">250GB</span> Free.
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->

    </div>

    <!-- ============================================================== -->
    <!-- End of Main Content -->
    <!-- ============================================================== -->

</div>
<!-- END wrapper -->

<!-- Theme Settings -->
<div class="offcanvas offcanvas-end overflow-hidden" tabindex="-1" id="theme-settings-offcanvas">
    <div class="d-flex justify-content-between text-bg-primary gap-2 p-3" style="background-image: url(assets/images/user-bg-pattern.png);">
        <div>
            <h5 class="mb-1 fw-bold text-white text-uppercase">Admin Customizer</h5>
            <p class="text-white text-opacity-75 fst-italic fw-medium mb-0">Easily configure layout, styles, and preferences for your admin interface.</p>
        </div>

        <div class="flex-grow-0">
            <button type="button" class="d-block btn btn-sm bg-white bg-opacity-25 text-white rounded-circle btn-icon" data-bs-dismiss="offcanvas"><i class="ti ti-x fs-lg"></i></button>
        </div>
    </div>

    <div class="offcanvas-body p-0 h-100" data-simplebar>
        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Select Theme</h5>
            <div class="row g-3">
                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-classic" value="classic">
                        <label class="form-check-label p-0 w-100" for="demo-skin-classic">
                            <img src="assets/images/layouts/themes/theme-classic.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Classic</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-material" value="material">
                        <label class="form-check-label p-0 w-100" for="demo-skin-material">
                            <img src="assets/images/layouts/themes/theme-material.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Material</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-modern" value="modern">
                        <label class="form-check-label p-0 w-100" for="demo-skin-modern">
                            <img src="assets/images/layouts/themes/theme-modern.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Modern</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-saas" value="saas">
                        <label class="form-check-label p-0 w-100" for="demo-skin-saas">
                            <img src="assets/images/layouts/themes/theme-saas.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">SaaS</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-flat" value="flat">
                        <label class="form-check-label p-0 w-100" for="demo-skin-flat">
                            <img src="assets/images/layouts/themes/theme-flat.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Flat</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-skin" id="demo-skin-minimal" value="minimal">
                        <label class="form-check-label p-0 w-100" for="demo-skin-minimal">
                            <img src="assets/images/layouts/themes/theme-minimal.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Minimal</h5>
                </div>

                <div class="col-6">
                    <div class="form-check card-radio pe-none">
                        <input class="form-check-input" disabled type="radio" name="data-skin" id="demo-skin-galaxy" value="galaxy">
                        <label class="form-check-label p-0 w-100" for="demo-skin-galaxy">
                            <img src="assets/images/layouts/themes/theme-galaxy.png" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Galaxy</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Color Scheme</h5>
            <div class="row">
                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-light" value="light">
                        <label class="form-check-label p-0 w-100" for="layout-color-light">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-dark" value="dark">
                        <label class="form-check-label p-0 w-100" for="layout-color-dark">
                            <img src="assets/images/layouts/dark.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-system" value="system">
                        <label class="form-check-label p-0 w-100" for="layout-color-system">
                            <img src="assets/images/layouts/system.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">System</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Topbar Color</h5>

            <div class="row g-3">
                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-light" value="light">
                        <label class="form-check-label p-0 w-100" for="topbar-color-light">
                            <img src="assets/images/layouts/topbar-light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-dark" value="dark">
                        <label class="form-check-label p-0 w-100" for="topbar-color-dark">
                            <img src="assets/images/layouts/topbar-dark.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-gray" value="gray">
                        <label class="form-check-label p-0 w-100" for="topbar-color-gray">
                            <img src="assets/images/layouts/topbar-gray.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                </div>

                <div class="col-4">
                    <div class="form-check card-radio">
                        <input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-gradient" value="gradient">
                        <label class="form-check-label p-0 w-100" for="topbar-color-gradient">
                            <img src="assets/images/layouts/topbar-gradient.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Sidenav Color</h5>

            <div class="row g-3">
                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-light" value="light">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-light">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Light</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-dark" value="dark">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-dark">
                            <img src="assets/images/layouts/side-dark.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Dark</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-gray" value="gray">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-gray">
                            <img src="assets/images/layouts/side-gray.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gray</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-gradient" value="gradient">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-gradient">
                            <img src="assets/images/layouts/side-gradient.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Gradient</h5>
                </div>
                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-menu-color" id="sidenav-color-image" value="image">
                        <label class="form-check-label p-0 w-100" for="sidenav-color-image">
                            <img src="assets/images/layouts/side-image.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="fs-sm text-center text-muted mt-2 mb-0">Image</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <h5 class="mb-3 fw-bold">Sidebar Size</h5>

            <div class="row g-3">
                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-default" value="default">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-default">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Default</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-compact" value="compact">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-compact">
                            <img src="assets/images/layouts/sidebar-compact.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Compact</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small" value="condensed">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-small">
                            <img src="assets/images/layouts/sidebar-sm.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Condensed</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small-hover" value="on-hover">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-small-hover">
                            <img src="assets/images/layouts/sidebar-sm.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">On Hover</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-small-hover-active" value="on-hover-active">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-small-hover-active">
                            <img src="assets/images/layouts/light.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 fs-base text-center text-muted mt-2">On Hover - Show</h5>
                </div>

                <div class="col-4">
                    <div class="form-check sidebar-setting card-radio">
                        <input class="form-check-input" type="radio" name="data-sidenav-size" id="sidenav-size-offcanvas" value="offcanvas">
                        <label class="form-check-label p-0 w-100" for="sidenav-size-offcanvas">
                            <img src="assets/images/layouts/sidebar-full.svg" alt="layout-img" class="img-fluid">
                        </label>
                    </div>
                    <h5 class="mb-0 text-center text-muted mt-2">Offcanvas</h5>
                </div>
            </div>
        </div>

        <div class="p-3 border-bottom border-dashed">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Layout Position</h5>

                <div class="btn-group radio" role="group">
                    <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed">
                    <label class="btn btn-sm btn-soft-warning w-sm" for="layout-position-fixed">Fixed</label>

                    <input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable">
                    <label class="btn btn-sm btn-soft-warning w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
                </div>
            </div>
        </div>

        <div class="p-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><label class="fw-bold m-0" for="sidebaruser-check">Sidebar User Info</label></h5>
                
                <div class="form-check form-switch fs-lg">
                    <input type="checkbox" class="form-check-input" name="sidebar-user" id="sidebaruser-check">
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas-footer border-top p-3 text-center">
        <div class="row">
            <div class="col-6">
                <button type="button" class="btn btn-light fw-semibold py-2 w-100" id="reset-layout">Reset</button>
            </div>
            <div class="col-6">
                <a href="https://wrapbootstrap.com/theme/inspinia-multipurpose-admin-dashboard-template-WB0R5L90S?ref=inspinia" target="_blank" class="btn btn-danger bg-gradient py-2 fw-semibold w-100">Buy Now</a>
            </div>
        </div>
    </div>
</div>

<!-- Vendor js -->
<script src="assets/js/vendors.min.js"></script>

<!-- App js -->
<script src="assets/js/app.js"></script>

<!-- Quill Editor js -->
<script src="assets/plugins/quill/quill.js"></script>

<!-- Dropzone File Upload js -->
<script src="assets/plugins/dropzone/dropzone-min.js"></script>

<!-- Add Product Page js -->
<script src="assets/js/pages/ecommerce-add-product.js"></script>

</body>

</html>